<template>
  <div class="parent">
    <img class="logoImage" src="../../assets/Logo/logo.png" alt="暂无图片" @click="router.push('/')">
    <el-card class='loginCard'>
      <img class="float-image" src="../../assets/login.png" alt="暂无图片">
      <div class="vertical-line"></div>
      <div class="image-content">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="短信登录" name="first" class="tabs_ch">
            <br>
            <el-text class="mx-1">验证即登录，未注册手机将自动注册</el-text>
            <div>
              <el-input class="loginInput" v-model="user.phone" maxlength="11" type="text" size="large" placeholder="手机号" style="margin-top: 10px;"/>
              <br>
            </div>
            <div>
              <el-input class="loginInput" v-model="user.code" maxlength="6" type="text" size="large"  placeholder="验证码">
                <template #suffix>
                  |&nbsp;<el-button class="custom-suffix" @click="send_sms">{{ user.sms_btn_text }}</el-button>
                </template>
              </el-input>
              <i></i>
            </div>
            <div style="margin-top: 10px">
              <el-checkbox class="check_color" size="small" @change="is_check"><el-text size="small">我已阅读并接受丁香园《<a href="">用户协议</a>》《<a href="">隐私政策</a>》</el-text></el-checkbox>
              <el-button color="#7753ff" size="large" style="width: 100%;margin-top: 10px;border-radius: 20px 20px 20px 20px;" @click="LoginSms">登录</el-button>
            </div>
            <div style="margin-top: 20%">
              <el-text @click="toForgetPwd">忘记密码？</el-text>
              <el-text style="margin-left: 50%" @click="toRegister">注册新账号</el-text>
            </div>
          </el-tab-pane>
          <el-tab-pane label="密码登录" name="second">
            <br>
            <div>
              <el-input class="loginInput" v-model="user.account" type="text" size="large" placeholder="用户名/手机号/邮箱" style="margin-top: 5px;"/>
              <br>
            </div>
            <div>
              <el-input class="loginInput" v-model="user.password" maxlength="16" type="password" size="large" show-password placeholder="密&nbsp;&nbsp;&nbsp;&nbsp;码"/>
              <i></i>
            </div>
            <div style="margin-top: 10px">
              <el-checkbox class="check_color" @change="is_check" size="small"><el-text size="small">我已阅读并接受丁香园《<a href="">用户协议</a>》《<a href="">隐私政策</a>》</el-text></el-checkbox>
              <el-button color="#7753ff" size="large" style="width: 100%;margin-top: 10px;border-radius: 20px 20px 20px 20px;" @click="loginhandle">登录</el-button>
            </div>
            <div style="margin-top: 20%">
              <el-text @click="toForgetPwd">忘记密码？</el-text>
              <el-text style="margin-left: 50%" @click="toRegister">注册新账号</el-text>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, watch} from "vue";
import user from "../../api/user"
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import {useStore} from "vuex";
const router = useRouter()
const store = useStore()

let activeName = ref('first')

let is_check_info =ref(false)
const is_check=(info)=>{
  is_check_info.value = info
}

// 发送短信
const send_sms = ()=> {
  console.log("是否选中："+is_check_info.value)
  if (is_check_info.value === false) {
    ElMessage.error("请勾选用户协议！")
    return false
  }

  if (!/1[3-9]\d{9}/.test(user.phone)) {
    ElMessage.error("手机号格式有误！")
    return false
  }

  // 判断是否处于短信发送的冷却状态
  if (user.is_send) {
    ElMessage.error("短信发送过于频繁！")
    return false
  }

  let time = user.sms_interval;

  // 发送短信请求
  user.login_send_sms().then(response=>{
    ElMessage.success("短信发送中，请留意您的手机！");
    // 发送短信后进入冷却状态
    user.is_send = true;
    // 冷却倒计时
    clearInterval(user.interval);
    user.interval = setInterval(()=> {
      if (time < 1) {
        user.is_send = false  // 退出短信发送的冷却状态
        user.sms_btn_text = "点击获取验证码"
      } else {
        time -= 1;
        user.sms_btn_text = `${time}秒后重新获取`;
      }
    },1000)
  }).catch(error=>{
    console.log(error);

    ElMessage.error(error?.response?.data?.message);
    time = error?.response?.data?.interval;
    // 冷却倒计时
    clearInterval(user.interval);
    user.interval = setInterval(()=>{
      if(time<1){
        // 退出短信发送的冷却状态
        user.is_send = false
        user.sms_btn_text = "点击获取验证码"
      }else{
        user.is_send = true;
        time-=1;
        user.sms_btn_text = `${time}秒后重新获取`;
      }
    }, 1000)

  })
}

const LoginSms=()=>{
  // 注册处理
  // 基于密码的登录处理
  // 验证数据
  if(user.phone.length<1){
    // 错误提示
    console.log("错了哦，用户名或密码不能为空！");
    ElMessage.error("用户名不能为空！");
    return; // 阻止代码继续往下执行
  }

  if (user.code.length<1) {
    console.log("验证码不能为空！");
    ElMessage.error("验证码不能为空！");
    return; // 阻止代码继续往下执行
  }

  // 发送请求
  user.loginSms().then(response=>{

    console.log('-----验证码登录成功----');
    console.log(response);

    // 注册成功！
    // 先删除从前的登录状态
    localStorage.removeItem("refresh_token");
    localStorage.removeItem("access_token");
    sessionStorage.removeItem("refresh_token");
    sessionStorage.removeItem("access_token");

    sessionStorage.setItem("refresh_token", response.data.data.refresh);
    sessionStorage.setItem("access_token", response.data.data.token);


    // 把用户登录的载荷信息，保存到vuex中
    let payload = response.data.data.token.split(".")[1]  // 载荷
    let payload_data = JSON.parse(atob(payload)) // 用户信息

    store.commit("login", payload_data)
    ElMessage.success("登录成功！");

    user.reset();
    // 目前我们没有完成用户中心，所以先跳转到首页
    router.push("/");
  }).catch(error=>{
    // 注册失败！
    console.log('-----注册失败----');
    console.log(error);
    ElMessage.success(`用户登录失败！错误信息：${error?.response?.data?.message}`);
  })

}

const loginhandle = ()=>{
  console.log("是否选中："+is_check_info.value)
  if (is_check_info.value === false) {
    ElMessage.error("请勾选用户协议！")
    return false
  }
  // 基于密码的登录处理
  // 验证数据
  if(user.account.length<1 || user.password.length<1){
    // 错误提示
    console.log("错了哦，用户名或密码不能为空！");
    ElMessage.error("错了哦，用户名或密码不能为空！");
    return; // 阻止代码继续往下执行
  }

  // 登录请求处理
  user.login_by_password().then(response=>{

    console.log('登录成功打印信息......');
    console.log(response);

    // 先删除从前的登录状态
    localStorage.removeItem("refresh_token");
    localStorage.removeItem("access_token");

    sessionStorage.removeItem("refresh_token");
    sessionStorage.removeItem("access_token");

    // if(user.rememberMe){
    //   // 记住登录
    //   localStorage.setItem("refresh_token", response.data.refresh);
    //   localStorage.setItem("access_token", response.data.access);
    // }else{
    //   // 不记住登录
    sessionStorage.setItem("refresh_token", response.data.refresh);
    sessionStorage.setItem("access_token", response.data.access);
    // }

    // 记录购物车商品总数
    // store.commit("set_cart_total", response.data.cart_total);
    //
    // // 把用户登录的载荷信息，保存到vuex中
    // let payload = response.data.access.split(".")[1]  // 载荷
    // let payload_data = JSON.parse(atob(payload)) // 用户信息
    // // console.log(payload_data)
    // store.commit("login", payload_data)
    // store.commit("remember", user.rememberMe);
    ElMessage.success("登录成功！");

    // 关闭登录弹窗，对外发送一个登录成功的信息
    user.reset();
    // emit("successhandle");
    router.push('/')
  }).catch(error=>{
    console.log('登录失败.....');
    console.log(error);
    ElMessage.error("登录失败！");
  })

}

const toRegister=()=>{
  router.push('/register')
}

const toForgetPwd=()=>{
  router.push('/forgetPwd')
}

</script>

<style scoped>
.logoImage{
  position: absolute;
  top: 15%;
  left: 22%;
  display:flex;
  width: 150px;
  height: 80px;
  transform: translate(-50%, -50%);

}
.loginCard{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68%;
  height: 60%;
  border-radius: 8px;
}


.float-image {
  position: absolute;
  top: 50%;
  left: 35%;
  display:flex;
  width: 60%;
  height: 90%;
  transform: translate(-50%, -50%);
}


.image-content {
  margin-left: 70%;
}

.demo-tabs >>> .is-active {
  color: #000000;
}

.demo-tabs >>> .el-tabs__nav-wrap::after {
  position: static !important;
}


.demo-tabs >>> .el-tabs__active-bar {
  background-color: #7753ff !important;
  width: 15px!important;
  margin-left: calc((70% / 2 - 15px) / 2);
  height: 4px;
  border-radius: 4px;
}

.demo-tabs:hover >>> .el-tabs__item {
  color: #000000; /* 这里设置为红色 */
}

.demo-tabs >>> .el-tabs__item {
  text-align: center;
}

.vertical-line {
  position: absolute;
  top: 0;
  right: 33%;
  display:flex;
  height: 100%;
  border-left: 1px solid rgba(128, 128, 128, 0.5);
}

.loginInput >>> .el-input__wrapper {
  width: 80%;
  margin-top: 10px;
  margin-bottom: 5px;
  border-radius: 20px 20px 20px 20px; /* 这里的20px可以根据需要修改成任何你想要的大小 */
  background-color: rgba(248, 248, 248);
}

.loginInput >>> .el-input__inner {
  /*background-color: rgba(0, 0, 0, 0.1);*/
}

.mx-1 {
  margin: 20px;
}

.custom-suffix {
  display: flex;
  align-items: center;
  padding-right: 10px;
  color: #7753ff;
  border: none;
  background-color: rgba(0, 0, 0, 0);
}

</style>